<template>
	<view class="">
		<view class="title">
			<text>以下为已处理/已过期消息</text>
			<text @click="allRead">全部已读</text>
		</view>
		<view class="box" v-if="messageInfo.length>0">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in messageInfo"
				:key="item.systemMessageId" @click="click" :options="options">
				<view class="item">
					<view class="content" @click="getMessageDetail(messageInfo[index].systemMessageId)">
						<view class="top">
							<text class="left">系统消息</text>
							<text class="right">{{item.createTime}}</text>
						</view>
						<view class="bottom">
							<text>{{item.message}}</text>
							<u-badge v-if="item.messageStatus==1" :count="1" :absolute="false" slot="right-icon">
							</u-badge>
						</view>
					</view>
				</view>
			</u-swipe-action>
			<u-swipe-action :show="show" :index="index" :btn-width="btnWidth" v-for="(item,index) in messageInfo"
				:key="index" @click="remove(item)" :options="options">
			</u-swipe-action>
			<u-popup v-model="isshow" mode="center" border-radius="10" width="500rpx" height="auto">
				<view class="popupContent">
					<view class="title" style="padding: 0;margin: 0;">
						确定清除所有未读吗？
					</view>
					<view class="btn" >
						<u-button size="mini" style="margin-right: 20rpx;" @click="confirm">确定</u-button>
						<u-button size="mini" @click="close" >取消</u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<view v-else>
			<null></null>
		</view>
		<u-loadmore :status="status" :load-text="loadText"  id="loadmore"/>
	</view>
</template>

<script>
	import API from "@/api/my.js"
	export default {
		onShow() {
			this.getMessageList()
		},
		data() {
			return {
				count: 0,
				parms: {
					page: 1,
					limit: 10
				},
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				isshow: false,
				show: false,
				messageInfo: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		onReachBottom(){
			uni.showLoading({
				title: this.status,
			});
			this.status = 'loading';
			this.parms.page = this.parms.page + 1;
			
				API.getMessageList(this.parms).then(res => {
					console.log(res)
					this.messageInfo = this.messageInfo.concat(res.data)
					console.log(this.messageInfo);
					this.count = res.count
				})
				if (this.parms.page * this.parms.limit >= this.count) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
		},
		methods: {
			getMessageList() {
				let token = uni.getStorage({
					token: token
				})
				API.getMessageList(this.parms).then(res => {
					console.log(res)
					this.messageInfo = res.data
					this.count = res.count
					if (this.parms.page * this.parms.limit >= this.count) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
				})
			},
			allRead() {
				this.isshow = true
			},
			confirm(){
				// console.log(this.messageInfo)
				// this.messageInfo.map(ele=>ele.messageStatus=2)
				let token = uni.getStorage({
					token: token
				})
				API.messageAllRead({token}).then(res=>{
					console.log(res)
				})
				this.isshow = false
			},
			close(){
				this.isshow = false
			},
			getMessageDetail(e) {
				// console.log(e)
				uni.navigateTo({
					url: '/pagesB/myMessage/messageDetail?systemMessageId=' + e
				})
			},
			click(index, index1) {

				if (index1 == 0) {
					let systemMessageId = this.messageInfo[index].systemMessageId
					API.delMessage({
						systemMessageId: systemMessageId
					}).then(res => {
						if (res.success) {
							this.getMessageList()
							this.$u.toast(`删除成功`);
						} else {
							this.$u.toast(`删除失败`);
						}
					})

				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			// open(index) {
			// 	// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 	// 原本为'false'，再次设置为'false'会无效
			// 	this.messageInfo[index].show = true;
			// 	this.messageInfo.map((val, idx) => {
			// 		if (index != idx) this.messageInfo[idx].show = false;
			// 	})
			// }
		},

	}
</script>

<style>
	.item{
		border-top: 7rpx solid #f9f9f9;
	}
	.popupContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
	}
	.btn{
		margin-top: 20rpx;
	}
	.top {
		display: flex;
		justify-content: space-between;
		height: 93rpx;
		line-height: 93rpx;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.bottom {
		/* padding: 24rpx 32rpx; */
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.bottom text {
		color: #8e8e88;
		font-size: 28rpx;
		color: #999999;
		padding: 24rpx 0;
	}

	.left {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #2C2C2C;
	}

	.right {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
	}

	.title {
		margin: 48rpx 60rpx;
		color: #a1a1a1;
		display: flex;
		justify-content: space-between;
	}

	.content {
		width: 690rpx;
		height: auto;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 16rpx;
		padding: 24rpx 32rpx;
	}
</style>
